<header>
    v-slot插槽使用和一些细节整理
</header>
<h2>
    基本使用
</h2>
<p>
    组件通过slot预留位置，使用组件的时候，可以通过传递具体的内容去替换slot占用的地方，这就是插槽。
</p>
<p>
    比如现在定义了一个组件：
</p>
<pre tag="html">
&lt;!-- simple-use.vue --&gt;
&lt;template&gt;
    &lt;div&gt;
        &lt;slot&gt;&lt;/slot&gt;
    &lt;/div&gt;
&lt;/template&gt;
</pre>
<p>
    组件```&lt;slot&gt;&lt;/slot&gt;```占用的位置具体内容不确定，需要使用的时候传递进来，我们就可以这样使用：
</p>
<pre tag="html">
&lt;simple-use&gt;
    &lt;em style='color:red'&gt;传递给插槽的内容（可以是文本，标签或者组件等）&lt;/em&gt;
&lt;/simple-use&gt;
</pre>
<p>
    最终的结果可以理解为：
</p>
<pre tag="html">
&lt;template&gt;
    &lt;div&gt;
        &lt;!-- &lt;slot&gt;&lt;/slot&gt; 这个标记的内容被下面的代替了 --&gt;
        &lt;em style='color:red'&gt;传递给插槽的内容（可以是文本，标签或者组件等）&lt;/em&gt;
    &lt;/div&gt;
&lt;/template&gt;
</pre>
<h3>
    给插槽一个默认值
</h3>
<p>
    有时候，我们可能希望slot有一个自己的默认值，在没有传递数据给组件的时候，使用默认数据。
</p>
<p>
    想实现这样给功能很简单，只要在slot直接添加默认值即可，比如：
</p>
<pre tag="html">
&lt;!-- default-content.vue --&gt;
&lt;template&gt;
    &lt;div&gt;
        &lt;slot&gt;
            没有传递数据时候的默认值
        &lt;/slot&gt;
    &lt;/div&gt;
&lt;/template&gt;
</pre>
<p>
    使用的时候就可以传递或者不传递数据：
</p>
<pre tag="html">
&lt;default-content&gt;&lt;/default-content&gt;
&lt;default-content&gt;这是传递的数据&lt;/default-content&gt;
</pre>
<p>
    最终的结果可以理解为：
</p>
<pre tag="html">
&lt;template&gt;
    &lt;div&gt;
        没有传递数据时候的默认值
    &lt;/div&gt;
&lt;/template&gt;

&lt;template&gt;
    &lt;div&gt;
        这是传递的数据
    &lt;/div&gt;
&lt;/template&gt;
</pre>
<p>
    我们看见，第一个选择了默认数据，第二个使用了传递进去的数据。
</p>
<p class="warn">
    温馨提示：父级模板里面的所有内容都是在父级作用域中编译的，子模板里面的所有内容都是在子作用域中编译的。
</p>
<h2>
    具名插槽
</h2>
<p>
    有时候slot可能有多个，为了对应起来，可以给slot起名字，传递的时候对应起来：
</p>
<pre tag="html">
&lt;!-- name-slot.vue--&gt;
&lt;template&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;slot name='index1'&gt;&lt;/slot&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;slot name='index2'&gt;&lt;/slot&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;slot&gt;&lt;/slot&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/template&gt;
</pre>
<p>
    我们定义了三个slot，其中两个名字分别叫index1和index2，第三个没有定义名称，默认名称是default，因此，我们在使用的时候就需要这样使用：
</p>
<pre tag="html">
&lt;name-slot&gt;
    &lt;template v-slot:index1&gt;
        地方1
    &lt;/template&gt;
    &lt;template v-slot:index2&gt;
        地方2
    &lt;/template&gt;
    &lt;template v-slot:default&gt;
        默认地方
    &lt;/template&gt;
&lt;/name-slot&gt;
</pre>
<p>
    我们通过v-slot:name的方式把template模板和slot对应了起来，因此运行后的结果就是：
</p>
<pre tag="html">
&lt;!-- name-slot.vue --&gt;
&lt;template&gt;
    &lt;ul&gt;
        &lt;li&gt;
            地方1
        &lt;/li&gt;
        &lt;li&gt;
            地方2
        &lt;/li&gt;
        &lt;li&gt;
            默认地方
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/template&gt;
</pre>
<p class="warn">
    需要注意的是，v-slot只能添加在```&lt;template&gt;```上（不过"作用域插槽"这种情况除外）。
</p>
<h2>
    作用域插槽
</h2>
<p>
    有时候我们希望在使用组件的是，让插槽内容访问子组件中的数据，可以通过插槽 prop这个特性实现：
</p>
<pre tag="html">
&lt;!-- scope-slot.vue --&gt;
&lt;template&gt;
    &lt;div&gt;
        &lt;slot v-bind:message='message'&gt;&lt;/slot&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        data() {
            return {
                message: "来自子组件中的数据"
            };
        }
    };
&lt;/script&gt;
</pre>
<p>
    使用的时候，我们需要接收一下：
</p>
<pre tag="html">
&lt;scope-slot&gt;
    &lt;!-- 这里的default表示默认的，如果有多个插槽，改为对应的插槽名字 --&gt;
    &lt;template v-slot:default='sub_scope'&gt;
        &lt;span :bind='sub_scope.message'&gt;&lt;/span&gt;
    &lt;/template&gt;
&lt;/scope-slot&gt;
</pre>
<p>
    最终的结果就是：
</p>
<pre tag="html">
&lt;template&gt;
    &lt;div&gt;
        &lt;span&gt;来自子组件中的数据&lt;/span&gt;
    &lt;/div&gt;
&lt;/template&gt;
</pre>